import React,{useEffect,useState} from 'react'
import SearchInfo from '../../components/SearchInfo'
import ServiceCart from './item/ServiceCart';
import PackDetail from './item/PackDetail';

import { Space,Switch, Table,Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import $axios,{ImgUrl} from '../../utils/axios';


export default function ServicePack() {
  const [defaultView,setDefaultView] = useState(true)
  const [detailView,setDetailView] = useState(false)

  // 搜索
  const searchColoms = [
    {
      type:'select',
      name:'status',
      label:'服务包状态',
      options:[
        {value:'0',label:'全部'},
        {value:'1',label:'待审核'},
        {value:'2',label:'使用中'},
        {value:'3',label:'已驳回'},
        {value:'4',label:'已停用'},
      ]
    },
    {
      type:'text',
      name:'name'
    },
    {
      type:'button',
      name:'name'
    }
  ]
  const goSearch=(value:any)=>{
    console.log(value,'父组件');
  }

  const [list,setList]=useState<any[]>([])
  useEffect(()=>{
    getServiceLabelItem()
  },[])
  // 查询所有服务包以及对应标签以及服务项信息
  const getServiceLabelItem=()=>{
    $axios({
      url:'/api/getServiceLabelItem',
      method:'post',
    }).then((res:any)=>{
      console.log(res);
      let newData =[] as any
      res.data.map((item:any,index:number)=>{
        let obj = {
          id:item.id,
          title:item.name,
          text:item.targetAudience,
          imgurl:ImgUrl+item.picture,
          labelArr:item.labelArr
        }
        newData.push(obj)
      })
      setList(newData)

    })
  }
  const [detailID,setDetailID] = useState<any>()
  // 详情
  const goDetail=(id:any)=>{
    setDetailID(id)
    setDefaultView(false)
    setDetailView(true)
  }
  
    //   返回
    const back=()=>{
      setDefaultView(true)
      setDetailView(false)
    }
  return (
    <>
    {defaultView&&<div>
      <div style={{borderLeft:'4px solid #2984F8',paddingLeft:'5px',marginBottom:'10px'}}>
        <h3>服务包管理</h3>
      </div>
      <SearchInfo coloms={searchColoms} click={(value:any)=>goSearch(value)} rowKey='name'></SearchInfo>
      <div style={{display:'flex',alignItems:'center',flexWrap:'wrap',justifyContent:'space-between'}}>
        {
          list.length>0&& list.map((item:any,index:number)=>{
            return <ServiceCart coloms={item} key={item.id+index} click={()=>goDetail(item.id)}></ServiceCart> 
          })
        }
      </div>
    </div>}
    {detailView&&<PackDetail back={back} detailID={detailID}/>}
    </>
  )
}
